<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        String bathPath = request.getContextPath();
        pageContext.setAttribute("bathPath", bathPath);
    %>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${bathPath}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${bathPath}/css/common.css">
    <link rel="stylesheet" href="${bathPath}/css/formSelects-v4.css">
    <link rel="stylesheet" href="${bathPath}/css/attendanceRecord.css">
    <style type="text/css">
        .layui-layer-page .layui-layer-content {
            overflow-y: auto !important;
        }
        .demo-class{
            overflow-y: auto;
        }
        .layui-layer{
            top:0 !important;
        }
        .layui-layer-content{
            height:601px;
        }
    </style>
</head>
<body>
<section class="group-late">
    <div class="layui-form demoTable">
        <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select type="text" id="depId1" name="depId1" lay-verify="required" lay-filter="business"
                        autocomplete="off" class="layui-input">
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">员工</label>
            <div class="layui-input-inline">
                <select type="text" id="userName" xm-select="userName" xm-select-show-count="1" xm-select-direction="down" lay-filter="userName" name="userName" lay-verify="required" autocomplete="off"
                        class="layui-input">
                </select>
            </div>
        </div>

<%--        <div class="layui-inline">--%>
<%--            <label class="layui-form-label">员工姓名</label>--%>
<%--            <div class="layui-input-inline">--%>
<%--                <input type="text" name="userName" lay-verify="required|number" class="layui-input" id="userName"--%>
<%--                       placeholder="请输入员工姓名">--%>
<%--            </div>--%>
<%--        </div>--%>

        <div class="layui-inline">
            <label class="layui-form-label">起止时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="test1" id="test1" placeholder="请选择开始日期" autocomplete="off">
            </div>
            <span class="separator">-</span>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="test2" id="test2" placeholder="请选择结束日期">
            </div>
        </div>

        <div class="layui-inline" style="margin-left: 20px;">
            <button class="layui-btn layui-btn-normal w92" id="select" data-type="reload">查询</button>
            <button class="layui-btn layui-btn-normal w92 ml-20" id="editLog">修改日志</button>
<%--            <button class="layui-btn layui-btn-normal w92 ml-20" id="export">导出</button>--%>
        </div>

        <!--<div class="layui-inline">-->
            <!--<div>签到<div id="test8"></div></div>-->
        <!--</div>-->

        <!--<div class="layui-inline">-->
            <!--<div>早退<div id="test9"></div></div>-->
        <!--</div>-->
    </div>

    <table class="layui-hide" id="forgetSign" lay-filter="test"></table>
</section>

<div id="addMask" style="display: none;">
    <section class="group-late">
        <div class="layui-form demoTable">
            <div class="layui-inline">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline">
                        <select type="text" id="depId2" name="depId2" lay-verify="required" lay-filter="business2"
                                autocomplete="off" class="layui-input">
                        </select>
                </div>
            </div>



            <div class="layui-inline">
                <label class="layui-form-label">员工</label>
                <div class="layui-input-inline">
                    <select type="text" id="userName2" xm-select="userName2" xm-select-show-count="5" xm-select-direction="down"  name="userName2" lay-verify="required" autocomplete="off"
                            class="layui-input">
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">起止时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="test1" id="test1Mask" placeholder="请选择开始日期" autocomplete="off">
                </div>
                <span class="separator">-</span>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="test2" id="test2Mask" placeholder="请选择结束日期">
                </div>
            </div>

            <div class="layui-inline" style="margin-left: 20px;">
                <button class="layui-btn layui-btn-normal w92" id="selectMask" data-type="reloadRecords">查询</button>
                <%--<button class="layui-btn layui-btn-normal w92 ml-20" >记录恢复</button>--%>
            </div>

            <!--<div class="layui-inline">-->
                <!--<div>签到<div id="test8"></div></div>-->
            <!--</div>-->

            <!--<div class="layui-inline">-->
                <!--<div>早退<div id="test9"></div></div>-->
            <!--</div>-->
        </div>

        <table class="layui-hide" id="editLogTable" lay-filter="test"></table>
    </section>
</div>
</body>
<script src="${bathPath}/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js"></script>
<script src="${bathPath}/js/formSelects-v4.min.js"></script>
<script type="text/javascript" src="${bathPath}/js/common.js"></script>
<script>
    var layerIndex = null;
    var downDatas=[];
    $(function () {
        initLayUI();
        $.ajax({
            type: "POST",
            async: false,
            data: "",
            url: "${bathPath}/dept/selectDpetName.action",
            success: function (msg) {
                var html = "";
                html += "<option value=''>" + '请选择' + "</option>";
                for (var i = 0; i < msg.length; i++) {
                    html += "<option value='" + msg[i].depID + "'>" + msg[i].depName + "</option>";
                }
                $("#depId1,#depId2").html(html);
            }
        });
    })

    function initLayUI() {
        layui.use(['form', 'laydate', 'layer', 'table','colorpicker'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;
            var layer = layui.layer;
            // var colorpicker = layui.colorpicker;
            var formSelects = layui.formSelects;
            //起止时间1
            laydate.render({
                elem: '#test1',
                type:'date'
                ,trigger: 'click'
            });
            //起止时间2
            laydate.render({
                elem: '#test2',
                type:'date'
                ,trigger: 'click'
            });



            //日期时间选择器
            laydate.render({
                elem: '#createTime'
                , type: 'datetime'
                ,trigger: 'click'
            });

            //预定义颜色项
            // colorpicker.render({
            //     elem: '#test8'
            //     ,color: 'rgb(255,128,128)'
            //     ,predefine: true // 开启预定义颜色
            // });
            //
            //
            // //预定义颜色项
            // colorpicker.render({
            //     elem: '#test9'
            //     ,color: 'rgb(255,196,196)'
            //     ,predefine: true // 开启预定义颜色
            // });

            table.render({
                elem: '#forgetSign'
                , url: '${bathPath}/accessLog/selectAll.action'
                , toolbar: true
                ,height: 'full-38'
                , title: '原始出勤报表'
                , cols: [[
                    // {type: 'checkbox'}
                     {
                        field: 'depName', title: '部门',minWidth:92
                    }
                    // , {field: 'userID', title: '编号',minWidth:80}
                    , {field: 'userName', title: '姓名',minWidth:80}
                    , {field: 'userId', title: '登记号码',minWidth:180}
                    , {field: 'eventTime', title: '日期时间',width:170}
                    , {field: 'subPointID', title: '机器号',minWidth:100}
                    , {field: 'cardSN', title: '卡号',minWidth:60}
                    , {field: 'checkType', title: '签到类型',minWidth:100,templet: function (data) {
                            return formatterSignType(data.checkType);
                        }}
                    ,{field: 'eventSource', title: '比对方式',minWidth:60,templet: function (data) {
                            return eventSource(data.eventSource);
                        }}
                ]]
                , page: true
                , response: {
                    statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , id: 'testReload'
                // , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                //     return {
                //         "code": res.status, //解析接口状态
                //         "msg": res.message, //解析提示文本
                //         "count": res.total, //解析数据长度
                //         "data": res.rows.item //解析数据列表
                //     };
                // }
                // ,done:function(res){
                //     var data = res.data;
                //     var jsonString = JSON.stringify(data, ['depName','userName','userID','eventTime','subPointID','cardSN','checkType']);
                //     downDatas = JSON.parse(jsonString);
                // }
            });

            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'add') {
                    //传入add逻辑事件
                    runEvent();
                } else if (obj.event === 'edit') {
                    //传入编辑逻辑事件
                    runEvent(data);
                } else if (obj.event === 'cancel') {
                    layer.close(layerIndex);
                }
            });

            var $ = layui.$, active = {
                reload: function () {
                    var depId = $('#depId1');
                    var userId = formSelects.value('userName', 'valStr');
                    var beginTime = $('#test1').val() ? $('#test1').val() + ' 00:00:00': '';
                    var endTime = $('#test2').val() ? $('#test2').val() + ' 11:59:59':'';
                    //执行重载
                    table.reload('testReload', {
                        where: {
                            deptID: depId.val(),
                            userId: userId,
                            startTime: beginTime,
                            endTime: endTime
                        }
                        , page: {
                            curr: 1
                        }
                    });
                },
                // 查询修改日志记录
                reloadRecords: function () {
                    var deptID = $('#depId2');
                    var userId = formSelects.value('userName2', 'valStr');
                    var beginTime = $('#test1Mask').val() ? $('#test1Mask').val() + ' 00:00:00':'';
                    var endTime = $('#test2Mask').val() ? $('#test2Mask').val() + ' 11:59:59':'';
                    //执行重载
                    table.reload('recordsReload', {
                        where: {
                            deptID: deptID.val(),
                            userId:userId,
                            startTime:beginTime,
                            endTime:endTime
                        }
                        , page: {
                            curr: 1
                        }
                    });
                }
            };

            $('#select,#selectMask').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('.cancel-layer').on('click', function () {
                layer.close(layerIndex);
            })

            //修改日志事件
            $('#editLog').on('click',function(){
                var deptID = $('#depId2');
                var userName = $('#userName2');
                var beginTime = $('#test1Mask');
                var endTime = $('#test2Mask');
                deptID.val('');
                userName.val('');
                beginTime.val('');
                endTime.val('');
                layerIndex = layer.open({
                    type: 1
                    , title: '考勤记录修改日志' //不显示标题栏
                    , area: "1000px"
                    , shade: 0.8
                    , id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                    // ,btn: ['确定', '取消']
                    // ,btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: $('#addMask')
                    , success: function (layero, index) {
                        //修改日志起始时间
                        laydate.render({
                            elem: '#test1Mask',
                            type:'date'
                            ,trigger: 'click'
                        });
                        //修改日志结束时间
                        laydate.render({
                            elem: '#test2Mask',
                            type:'date'
                            ,trigger: 'click'
                        });
                        form.render();
                        //考勤修改日志表
                        table.render({
                            elem: '#editLogTable'
                            , url: '${bathPath}/checkExact/selectAll.action'
                            , toolbar: true
                            ,height: 'full-81'
                            , title: '考勤记录修改日志表'
                            ,skin:'demo-class'
                            , cols: [[
                                // {type: 'checkbox'}
                               {
                                    field: 'depName', title: '部门',minWidth:120
                                }
                                , {field: 'userName', title: '姓名'}
                                , {field: 'userId', title: '号码'}
                                , {field: 'checkTime', title: '签到/退时间',minWidth:180}
                                , {field: 'checkType', title: '类型',minWidth:180}
                                , {field: 'runType', title: '操作',minWidth:180}
                                , {field: 'yuanYin', title: '原因',minWidth:180}
                                , {field: 'createTime', title: '修改时间',minWidth:180}
                                , {field: 'operational', title: '操作员',templet: function (data) {
                                    return localStorage.getItem('userName');
                                }}
                            ]]
                            , page: true
                            , response: {
                                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                            }
                            , id: 'recordsReload'
                            ,parseData: function(res){ //res 即为原始返回的数据
                                $.each(res.data,function(i,item){
                                    res.data[i].checkTime= formatTime(item.checkTime);
                                    res.data[i].createTime= formatTime(item.createTime);
                                    res.data[i].runType= formatterRunType(item.runType);
                                    res.data[i].checkType= formatterAttendStatus(parseInt(item.checkType,10));
                                })
                                return {
                                    "code": res.code, //解析接口状态
                                    "msg": res.msg, //解析提示文本
                                    "count": res.count, //解析数据长度
                                    "data": res.data//解析数据列表
                                };
                            }
                        });
                        table.resize('recordsReload');
                    }
                });
            })

            //导出全部数据
            // $('#export').on('click',function(){
            //     table.exportFile(['部门','姓名','登记号码', '日期时间', '机器号','卡号','签到类型','比对方式'], downDatas, 'xls');
            // })

            form.on('submit(formTest)', function (data) {
                layer.alert(JSON.stringify((data.field), {
                    title: '最终提交的信息'
                }))
                layer.close(layerIndex);
                return false;
            })


            form.on('select(business)', function (data) {
                //获取部门的ID通过异步查询子集
                var depId = $(this).attr("lay-value");
                $.ajax({
                    type: "POST",
                    async:false,
                    data: {depId:depId},
                    dataType:'json',
                    contentType:"application/x-www-form-urlencoded",
                    url: "${bathPath}/userInfo/selectUserName.action",
                    success: function (msg) {
                        var html = "";
                        if(msg && msg.length > 0){
                            html += "<option value=''>" + '请选择员工' + "</option>";
                            for (var i = 0; i < msg.length; i++) {
                                html += "<option value='" + msg[i].userID + "'>" + msg[i].userName + "</option>";
                            }
                        }
                        $("#userName").html(html);
                        form.render('select');
                        formSelects.render('userName');
                    }
                });
            });

            form.on('select(business2)', function (data) {
                //获取部门的ID通过异步查询子集
                var depId = $(this).attr("lay-value");
                $.ajax({
                    type: "POST",
                    async:false,
                    data: {depId:depId},
                    dataType:'json',
                    contentType:"application/x-www-form-urlencoded",
                    url: "${bathPath}/userInfo/selectUserName.action",
                    success: function (msg) {
                        var html = "";
                        if(msg && msg.length > 0){
                            html += "<option value=''>" + '请选择员工' + "</option>";
                            for (var i = 0; i < msg.length; i++) {
                                html += "<option value='" + msg[i].userID + "'>" + msg[i].userName + "</option>";
                            }
                        }
                        $("#userName2").html(html);
                        form.render('select');
                        formSelects.render('userName2');
                    }
                });
            });
        });
    }
</script>
</html>